/**
 * 表单处理
 */
import React, { Component } from 'react';


const Fnc = () => <h1>我是函数组件</h1>

class Child extends Component {
  render() {
    return (
      <div>
        我是类组件
      </div>
    );
  }
}


class Index extends Component {

  // 设置状态数据
  state = {
    val: ''
  }

  // 1. 创建ref对象
  inputs = React.createRef();

  fnRef = React.createRef();


  // 处理input
  handlerInput = (e) => {
    // 当前用户输入的值
    // console.log(e.target.value);
    this.setState({
      val: e.target.value
    })
  }

  // 提交表单
  pub = () => {
    console.log('获取表单数据：', this.state.val, this.inputs.current.value, this.fnRef);
    this.inputs.current.style.color = 'red'

  }

  // 事件处理函数：接收参数
  handlerMsg = (e, t, c) => {
    console.log(e, t, c)
  }

  render() {
    return (
      <div>
        <h1>react表单处理</h1>
        <hr />
        {/* 双向绑定 */}
        <p>{this.state.val}</p>
        <input type="text" value={this.state.val} onChange={this.handlerInput} />
        {/* 绑定ref对象 */}
        <input ref={this.inputs} type="text" />

        <button onClick={this.pub}>提交</button>
        <hr />
        <button onClick={(e) => {
          // console.log(e);
          this.handlerMsg(e, 10000, 'dfdf')
        }}>事件处理函数传递实参</button>
        <hr />
        <Child ref={this.fnRef} />
      </div>
    );
  }
}

export default Index;